<template>
    <div class="img_big" v-show=" masking"  @mousewheel.stop="handler">
        <p class="bth left" @click="img_l">
            <img src="../../../public/img/common/jiantou_right.png" alt="">
        </p>
           <span  class="quit" @click="closeBrowsing">x</span>
           <img :src="imgList[index_i]" alt="" class="pictureDisplay">
        <p class="bth right" @click="img_r">
            <img src="../../../public/img/common/jiantou_left.png" alt="">
        </p>
    </div>

</template>

<script>
export default {
    name: "ImageViewing",
    props:['masking',"index","maskingImg"],
    data(){
        return{
            handler:"",
            index_i:"",
            imgList:"",
        }
    },
    mounted() {
        this.index_i = this.index;
        this.imgList = this.maskingImg;
    },
    watch:{
        index(newValue,oldValue){
            this.index_i = newValue;
        },
        maskingImg(newValue,oldValue){
            if(newValue!==''){
                this.imgList = newValue;
            }
        }
    },
    methods:{
        closeBrowsing(){
            let body =document.body;
            body.style.overflow='auto';
            this.$emit("closeBrowsing")
        },
        _masking(item,index){
            this.masking = true;
            this.pictureDisplay=item;
            this.index=index;
        },
        img_l(){
            if(this.index_i===0){
                alert("已经是第一张图片了")
            }else {
                this.index_i-=1;
                this.pictureDisplay = this.imgList[this.index_i].path;
            }
        },
        img_r(){
            if(this.index_i===this.imgList.length-1){
                alert("已经是最后一张图片了")
            }else {
                this.index_i+=1;
                this.pictureDisplay = this.imgList[this.index_i].path;
            }
        },
        mouseHandler(){
            // this.handler = "";
            // let box = document.querySelector(".img_big")
            // box.onmousewheel=(e)=>{
            //     this.times = false;
            //     if(e.wheelDelta<0){
            //         console.log(e.wheelDelta)
            //         if(this.index===this.imgList.length-1){
            //             return;
            //         }else {
            //             this.index+=1;
            //             this.pictureDisplay = this.imgList[this.index].path;
            //         }
            //     }else if(e.wheelDelta>0){
            //         if(this.index===0){
            //             return;
            //         }else {
            //             this.index-=1;
            //             this.pictureDisplay = this.imgList[this.index].path;
            //         }
            //
            //     }
            // }
            // setInterval(()=>{
            //     this.handler = this.mouseHandler;
            // },2000)
        }
    }
}
</script>

<style scoped>
.img_big{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height:100vh;
    z-index: 999;
    background: rgba(239, 243, 239, 0.7);
    overflow: auto;
}
.quit{
    position: fixed;
    display: flex;
    justify-content:center;
    align-items: center;
    width: 50px;
    height: 50px;
    font-size: 20px;
    top:10%;
    right:5%;
    color: white;
    cursor: pointer;
    background: rgba(19, 19, 19, 0.5);
    border-radius: 50%;
    z-index: 999999999;
}
.quit:hover{
    opacity: .8;
}

.pictureDisplay{
    max-height: 90vh;
    max-width: 90vw;
}
.left,.right{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fcf8f8;
    font-size: 25px;
    font-weight: bolder;
    background: rgba(24, 23, 23, 0.4);
    border-radius: 50%;
    cursor: pointer;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;

}
.left:hover,.right:hover{
    opacity: .9;
}
.left{
    left: 0;
}
.right{
    right: 0;
 }
</style>